<template>
  <van-area
    :title="areaTitle"
    :area-list="areaList"
    value="110101"
    @cancel="handleIsCity"
    @confirm="onConfirm"
  />
  <!-- @click="$emit('component', 'userArea')" -->
</template>

<script>
import { areaList } from "@vant/area-data";
import { useStore } from "vuex";

export default {
  name: "AreaTwo",
  props: {
    areaTitle: {
      type: String,
      default: "用户地区选择",
    },
  },
  setup() {
    const store = useStore();
    //关闭弹出框
    const handleIsCity = () => {
      store.commit("user/handleIsArea");
    };
    //选择地区
    const onConfirm = (value) => {
      console.log(value);
      const address = `${value[0].name} ${value[1].name} ${value[2].name}`;
      store.commit("user/handleCity", address);
      store.commit("user/handleIsArea");
    };
    return { areaList, handleIsCity, onConfirm };
  },
};
</script>

<style scoped></style>
